<div th:fragment="content" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <div id="subContainer">
        <div class="row align-items-center">
            <div class="border-0 mb-4">
                <div class="card-header py-3 no-bg bg-transparent d-flex align-items-center px-0 justify-content-between border-bottom flex-wrap">
                    <h3 class="fw-bold mb-0">{{opt.moduleName}}管理</h3>
                    <div class="col-auto d-flex w-sm-100">
                        <button type="button" class="btn btn-dark btn-set-task w-sm-100" v-on:click="toAdd()">
                            <i class="icofont-plus-circle me-2 fs-6"></i>新增{{opt.moduleName}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
        <div class="row clearfix g-3">
            <div class="col-sm-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-3" v-for="(filter, index) in searchParams.filters" :key="index"
                                 v-if="filter.showAble">
                                <div class="input-group" style="z-index: 10">
                                    <input type="text" placeholder="请输入关键词"
                                           class="input-sm form-control search-input"
                                           v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName"
                                           v-bind:fieldValue="filter.fieldValue"
                                           v-bind:compare="filter.compare"
                                           :disabled="filter.readonly"
                                           @keyup.enter.native="search"
                                           :placeholder="filter.placeholder" :readonly="filter.readonly" clearable>
                                </div>
                            </div>

                            <div class="input-group"
                                 style="display: flex; justify-content: flex-end; margin-top: -40px;">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-sm btn-primary"
                                            v-on:click="pagequery()"> 搜索</button>
                                </span>
                            </div>
                        </div>
                        <table id="myProjectTable" class="table table-hover align-middle mb-0" style="width:100%">
                            <thead>
                            <tr>
                                <th>菜单名称</th>
                                <th>类型</th>
                                <th>上级菜单</th>
                                <th>备注</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in items">
                                <td>{{item.name}}</td>
                                <td>{{item.type? '二级菜单' : '一级菜单'}}</td>
                                <td>{{topNameHandler(item.parentId)}}</td>
                                <td>{{item.remark}}</td>
                                <td>{{item.createAt}}</td>
                                <td>
                                    <div class="btn-group" role="group" aria-label="Basic outlined example">
                                        <button type="button" class="btn btn-outline-secondary"
                                                v-on:click="toUpdate(item)">
                                            <i class="icofont-edit text-success"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary deleterow"
                                                v-on:click="toDelete(item)"><i
                                                class="icofont-close-circled text-danger"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <pageination :total="searchParams.total" :size="searchParams.pageSize" :page="searchParams.page"
                                     :changge="pageFn"></pageination>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="userAdd" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-md modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">

                        <h5 class="modal-title  fw-bold" id="leaveaddLabel">{{opt.mode == 'ADD' ? '新增': '编辑'}}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="deadline-form">
                            <form>
                                <div class="row g-3 mb-3">
                                    <div class="col-sm-6">
                                        <label for="name" class="form-label">菜单名称</label>
                                        <input type="text" class="form-control" id="name" v-model="entity.name">
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="url" class="form-label">菜单地址</label>
                                        <input type="text" class="form-control" id="url"
                                               v-model="entity.url">
                                    </div>
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-sm-6">
                                        <label for="type" class="form-label">菜单类型</label>
                                        <select class="form-select" id="type" v-model="entity.type">
                                            <option value="0">一级菜单</option>
                                            <option value="1">二级菜单</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6" v-if="parseInt(entity.type) == 1">
                                        <label for="parentId" class="form-label">上级菜单</label>
                                        <select class="form-select" id="parentId" v-model="entity.parentId">
                                            <option v-bind:value="menu.id" v-for="menu in topMenus">{{menu.name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="remark" class="form-label">备注</label>
                                    <input type="text" class="form-control" id="remark" v-model="entity.remark">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" v-on:click="save()" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        new Vue({
            el: '#subContainer',
            data: {
                topMenus: [],
                opt: {
                    moduleName: "菜单",
                    moduleCode: "menus",
                    mode: null
                },
                entity: {
                    name: "",
                    url: "",
                    remark: "",
                    type: null,
                    parentId: null
                },
                searchParams: {
                    orderBy: 'create_at desc',
                    page: 1,
                    pageSize: 10,
                    filters: [
                        {
                            showAble: true,
                            readonly: false,
                            placeholder: "请输入菜单姓名",
                            fieldName: "name",
                            compare: "like",
                            fieldValue: ""
                        }
                    ],
                    isLock: ''
                },
                items: []
            },

            filters: {
                topNameHandler: function(id) {
                    for (let i = 0; i < this.topMenus.length; i++) {
                        let menu = this.topMenus[i];
                        if (menu.id === id) {
                            return menu.name;
                        }
                    }
                    return "";
                }
            },
            created: function () {
                this.pagequery();
                this.oneLevel();
            },
            methods: {
                topNameHandler: function(id) {
                    for (let i = 0; i < this.topMenus.length; i++) {
                        let menu = this.topMenus[i];
                        if (menu.id === id) {
                            return menu.name;
                        }
                    }
                    return "";
                },
                oneLevel: function () {
                    let that = this;
                    AJAX.POST_JSON(this.opt.moduleCode + "/list", {
                        filters: [
                            {
                                fieldName: "type",
                                compare: "=",
                                fieldValue: 0
                            }
                        ]
                    }, function (resp) {
                        that.topMenus = resp.data;
                    })
                },
                save: function () {
                    let respFun = function (resp) {
                        toastr.success(resp.msg, '提示');
                    }
                    if (this.opt.mode === 'ADD') {
                        AJAX.POST_JSON(this.opt.moduleCode + "/save", this.entity, respFun);
                    }
                    if (this.opt.mode === 'EDIT') {
                        AJAX.POST_JSON(this.opt.moduleCode + "/update", this.entity, respFun);
                    }
                    $("#userAdd").modal("hide")
                    this.pagequery();
                },
                doDelete: function (id) {
                    let that = this;
                    AJAX.DELETE(this.opt.moduleCode + "/delete", {id: id}, function (resp) {
                        that.pagequery();
                        toastr.success(resp.msg, '提示');
                    })
                },
                toAdd: function () {
                    this.opt.mode = "ADD";
                    this.entity = {};
                    $("#userAdd").modal("show")
                },
                toUpdate: function (item) {
                    this.opt.mode = "EDIT";
                    this.entity = JSON.parse(JSON.stringify(item));
                    $("#userAdd").modal("show")
                },
                toDelete: function (item) {
                    let that = this;
                    confirm("您确定要删除吗?", "", function (isConfirm) {
                        if (isConfirm) {
                            that.doDelete(item.id);
                        }
                    }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
                },
                pagequery: function () {
                    let that = this;
                    AJAX.POST_JSON(this.opt.moduleCode + "/page", this.searchParams, function (resp) {
                        that.items = resp.data.list;
                        that.searchParams.page = resp.data.page;
                        that.searchParams.total = resp.data.total;
                    })
                },
                pageFn: function (val) {
                    this.searchParams.page = val;
                    this.pagequery();
                }
            }
        })

    </script>
</div>
